import {type CSSProperties, type VNode} from "vue";
import {type ElTooltipProps, type Sort, type TreeNode} from "element-plus";

/**
 * style function
 */
type RowClassNameFn = (data: { row: any, rowIndex: number }) => string
type RowStyleFn = (data: { row: any, rowIndex: number }) => CSSProperties
type CellClassNameFn = (data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string
type CellStyleFn = (data: { row: any, column: any, rowIndex: number, columnIndex: number }) => CSSProperties
type HeaderRowClassNameFn = (data: { row: any, rowIndex: number }) => string
type HeaderRowStyleFn = (data: { row: any, rowIndex: number }) => CSSProperties
type HeaderCellClassNameFn = (data: { row: any, column: any, rowIndex: number, columnIndex: number }) => string
type HeaderCellStyleFn = (data: { row: any, column: any, rowIndex: number, columnIndex: number }) => CSSProperties

/**
 * control function
 */
type RowKeyFn = (row: any) => string
type SpanMethodFn = (data: { row: any, column: any, rowIndex: number, columnIndex: number })
    => number[] | { rowspan: number, colspan: number } | void
type TooltipFormatterFn = (data: { row: any, column: any, cellValue: any }) => VNode | string
type SummaryMethodFn = (data: { columns: any[], data: any[] }) => (VNode | string)[]
type LoadFn = (row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void

export interface TableProps {
    data: any[],
    height?: number | string,
    maxHeight?: number | string,
    stripe?: boolean,
    border?: boolean,
    size?: '' | 'large' | 'default' | 'small',
    fit?: boolean,
    showHeader?: boolean,
    highlightCurrentRow?: boolean,
    currentRowKey?: string | number,
    rowClassName?: RowClassNameFn | string,
    rowStyle?: RowStyleFn | CSSProperties,
    cellClassName?: CellClassNameFn | string,
    cellStyle?: CellStyleFn | CSSProperties,
    headerRowClassName?: HeaderRowClassNameFn | string,
    headerRowStyle?: HeaderRowStyleFn | CSSProperties,
    headerCellClassName?: HeaderCellClassNameFn | string,
    headerCellStyle?: HeaderCellStyleFn | CSSProperties,
    rowKey?: RowKeyFn | string,
    emptyText?: string
    defaultExpandAll?: boolean,
    expandRowKeys?: string[],
    defaultSort?: Sort,
    tooltipEffect?: 'dark' | 'light',
    tooltipOptions?: Pick<ElTooltipProps, 'effect' | 'enterable' | 'hideAfter' | 'offset' | 'placement' | 'popperClass' | 'popperOptions' | 'showAfter' | 'showArrow'>,
    appendFilterPanelTo?: string,
    showSummary?: boolean,
    sumText?: string,
    summaryMethod?: SummaryMethodFn,
    spanMethod?: SpanMethodFn,
    selectOnIndeterminate?: boolean,
    indent?: number,
    lazy?: boolean,
    load?: LoadFn,
    treeProps?: { hasChildren?: string, children?: string, checkStrictly?: boolean },
    tableLayout?: 'fixed' | 'auto',
    scrollbarAlwaysOn?: boolean,
    showOverflowTooltip?: boolean,
    flexible?: boolean,
    scrollbarTabindex?: string | number,
    allowDragLastColumn?: boolean,
    tooltipFormatter?: TooltipFormatterFn,
    preserveExpandedContent?: boolean,
}


export type TablePopper = {
    ref?: any,
    visible?: boolean,
    type?: string | null | undefined,
    data?: any,
    placement?: 'left' | 'right' | 'top' | 'bottom' | null | string,
}